<template>
  <div class="box wf-detailScroll">
    <div class="box-inner">
      测试测试测试测试测试测试测试测试测试测试测试
    </div>
  </div>
  <button @click="add">添加</button>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    add() {
      console.log(`helloworld`)
    }
  }
}
</script>
<style lang="scss">
.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #000;
  &-inner {
    width: 200px;
  }
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
  }
}

::-webkit-scrollbar {
  width: 6px !important;
  height: 4px !important;
  overflow: auto !important;
  background: #ccc !important;
  -webkit-appearance: auto !important;
  display: block;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  background: #c0c0c0 !important;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

.wf-detailScroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.wf-detailScroll::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0, 0);
}
.wf-detailScroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.wf-detailScroll::-webkit-scrollbar-thumb {
  background-color: rgba(191, 191, 191, 191);
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 28px;
}
.wf-detailScroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>
